<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="./konva.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节点-Lable文本</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>

</html>
<script>
  // 创建舞台
  const stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
  })

  // 创建图层
  const layer = new Konva.Layer()
  stage.add(layer)

  // 创建标签
  const label = new Konva.Label({
    x: window.innerWidth / 3,
    y: window.innerHeight / 3,
    draggable: true,
  })

  // 添加标签背景
  label.add(new Konva.Tag({
    fill: 'black',
    pointerDirection: 'down',
    pointerWidth: 10,
    pointerHeight: 10,
    lineJoin: 'round',
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowOpacity: 0.5,
  }))

  // 使用简单的 HTML 格式添加文本
  label.add(new Konva.Text({
    text: 'Hello, <b>world</b>!',
    fontSize: 18,
    padding: 10,
    fill: 'white',
    align: 'center',
    verticalAlign: 'middle',
  }))

  // 将标签添加到图层
  layer.add(label)

  // 渲染图层
  layer.draw();
</script>